<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——员工管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
    <link href="../js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <link href="../css/pager.css" type="text/css" rel="stylesheet"/>

    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <script src="../js/a/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/axios-config.js"></script>
</head>
<body>
<div id="employee">
    <!-- 导航 -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：员工管理 &gt; 员工查询</td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
        <!-- 查询区  -->
        <tr valign="top">
            <td height="30">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
                    <tr>
                        <td class="fftd">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="font3">
                                        职位：
                                        <select v-model="selectData.postId" prop="postId" name="job_id"
                                                style="width:143px;">
                                            <option v-for="job in post" :value="job.id">{{job.postName}}</option>
                                        </select>
                                        姓名：<input type="text" name="name" v-model="selectData.name">
                                        身份证号码：<input type="text" name="cardId" maxlength="18" v-model="selectData.idNo">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="font3">
                                        性别：
                                        <select v-model="selectData.sex" prop="sex" name="sex" style="width:143px;">
                                            <option value="0">男</option>
                                            <option value="1">女</option>
                                            <option value="2">未知</option>
                                        </select>
                                        手机：<input type="text" name="phone" v-model="selectData.phone">
                                        所属部门：<select v-model="selectData.deptId" prop="deptId" name="dept_id"
                                                     style="width:100px;">
                                        <option v-for="ment in dept" :value="ment.id">{{ment.deptName}}</option>
                                    </select>&nbsp;
                                        <input type="submit" @click="getEmployeList" value="搜索"/>
                                        <input id="delete" type="button" @click="deleteDialog = true" value="删除"/>
                                        <input type="button" @click="clear" value="清除搜索数据">
                                    </td>
                                </tr>
                            </table>

                            <el-dialog
                                    title="提示"
                                    :visible.sync="deleteDialog"
                                    width="30%">
                                <span>删除有风险，确认删除？</span>
                                <span slot="footer" class="dialog-footer">
                  <el-button @click="deleteDialog = false">取 消</el-button>
                  <el-button type="primary" @click="deleteEee">确 定</el-button>
                </span>
                            </el-dialog>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 数据展示区 -->
        <tr valign="top">
            <td height="20">
                <table width="100%" border="1" cellpadding="5" cellspacing="0"
                       style="border:#c2c6cc 1px solid; border-collapse:collapse;">
                    <tbody>
                    <tr class="main_trbg_tit" align="center">
                        <td><input :checked="checkAll1" @click="checkAll()" type="checkbox" name="checkAll"
                                   id="checkAll"></td>
                        <td>姓名</td>
                        <td>性别</td>
                        <td>手机号码</td>
                        <td>邮箱</td>
                        <td>职位</td>
                        <td>学历</td>
                        <td>身份证号码</td>
                        <td>部门</td>
                        <td>联系地址</td>
                        <td>建档日期</td>

                        <td align="center">操作</td>

                    </tr>

                    <tr v-for="(item,index) in employeeData" :id="createTrId(index)" class="main_trbg" align="center"
                        style="background-color: rgb(255, 255, 255);">
                        <td><input type="checkbox" v-model="getChecked1" :id="createTdId(index)" :value="item.id"></td>
                        <td>{{item.name}}</td>

                        <td v-if="item.sex == 0">男</td>
                        <td v-else-if="item.sex == 1">女</td>
                        <td v-else-if="item.sex == 2">未知</td>

                        <td>{{item.phone}}</td>
                        <td>{{item.email}}</td>
                        <td>{{item.post?item.post.postName:''}}</td><!--职位-->
                        <td>{{item.education}}</td>
                        <td>{{item.idNo}}</td>
                        <td>{{item.dept?item.dept.deptName:''}}</td><!--部门-->
                        <td>{{item.address}}</td>
                        <td>
                            {{item.createTime}}
                        </td>

                        <td align="center" width="40px;"><a :href="'showUpdateEmployee.html?id='+item.id">
                            <img title="修改" src="../images/update.gif"></a>
                        </td>

                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- 分页标签 -->
        <tr valign="top">
            <td align="center" class="font3">
                <table width="100%" align="center" style="font-size:13px;" class="digg">
                    <tbody>
                    <tr>
                        <el-pagination
                                @size-change="changeSize"
                                @current-change="changeNum"
                                :current-page.sync="pageNum"
                                :page-sizes="[5, 10, 20]"
                                :page-size.sync="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </tr>
                    <tr align="center">
                        <td style="font-size:13px;"></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>

<script>
    new Vue({
        el: '#employee',
        data: {
            employeeData: {}, //获取信息
            getChecked1: [],//获取checkbox的value
            post: {}, //获取职位信息
            dept: {}, //获取部门信息

            checkAll1: false, //false 取消全选 true 全选
            isFlag: false, //辅助全选
            deleteDialog: false,

            selectData: {}, //搜索对象

            //以下3条为分页插件
            pageNum: 1, //当前页
            pageSize: 5, //每页显示条数
            total: 0, //总条数
        },
        methods: {
            getEmployeList() { /*获取员工数据*/
                axios.get("/api/employee/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize,
                    {params: this.selectData}).then(resp => {
                    if (resp.data.code == 200) {
                        this.employeeData = resp.data.data.list;
                        this.pageNum = resp.data.data.pageNum; //当前页
                        this.total = resp.data.data.total; //总数据
                        // this.$message.success(resp.data.msg)
                    } else if (resp.data.msg) {
                        this.$message.error(resp.data.msg);
                    } else {
                        this.$message.error("系统错误!!!");
                    }
                })
            },
            changeSize(pageSize) {//改变每页条数时执行的函数
                this.pageSize = pageSize;
                this.getEmployeList();
            },
            changeNum(pageNum) {//改变页码时执行的函数
                this.pageNum = pageNum;
                this.getEmployeList();
            },
            createTrId(index) {
                return "data_" + index;
            },
            createTdId(index) {
                return "box_" + index;
            },
            clear() {
                this.selectData = {} /*清楚搜索数据*/
            },

            checkAll() { /*全选*/
                let boxs = $("input[type='checkbox'][id^='box_']");
                if (this.isFlag) {
                    this.isFlag = false;
                    boxs.each(function () {
                        this.checked = false
                    })
                    this.checkAll1 = false
                    console.log("checkAllStatus:", this.checkAll1)
                } else {
                    this.checkAll1 = true
                    boxs.each(function () {
                        this.checked = true
                    });
                    console.log("checkAllStatus:", this.checkAll1)
                    this.isFlag = true;
                }
                this.getChecked1 = boxs.filter(":checked").map(function () {
                    return this.value
                }).get()/*把选中的checkbox的值返回给getChecked1*/
                console.log(this.getChecked1)
            },
            deleteEee() {/*删除员工*/
                console.log(this.getChecked1)
                axios.post("/api/employee/removes", "ids=" + this.getChecked1)
                    .then(resp => {
                        if (resp.data.code == 200) {
                            this.getEmployeList();
                            this.$message.success(resp.data.msg)
                        } else if (resp.data.msg) {
                            this.$message.error(resp.data.msg);
                        } else {
                            this.$message.error("系统错误!!!");
                        }
                    })
                this.deleteDialog = false;
            },
        },
        mounted() {
            this.getEmployeList();
            axios.all([axios.get("/api/post/list"), axios.get("/api/dept/list")])//并发请求
                .then(axios.spread((post, dept) => {
                    this.post = post.data.data;
                    this.dept = dept.data.data;
                }))
        },
    })
</script>
</body>
</html>